<template>
  <div class="detail-warpper">
    <el-dialog :title="pageInfo.dialogTitle" :visible.sync="pageInfo.isShow" width="1200px">
      <el-form
        ref="ruleform"
        :inline="true"
        :model="form"
        :rules="rules"
        class="demo-form-inline"
      >
        <el-form-item label="失败原因：" prop="failReason">
          <el-input
            v-model="form.failReason"
            placeholder="输入失败原因，多个原因用“；”隔开"
            style="width: 768px;"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin-left: 10px;" @click="submitForm('ruleform')">搜索</el-button>
          <el-button style="margin-left: 12px;" @click="resetForm('ruleform')">重置</el-button>
          <el-button type="primary" style="margin-left: 20px;" @click="submitAll">全部提交</el-button>
        </el-form-item>
      </el-form>

      <el-tabs v-model="pageInfo.activeName" @tab-click="handleTabClick">
        <el-tab-pane
          v-for="item in pageInfo.tabList"
          :key="item.value"
          :label="item.label"
          :name="item.value"
        >
          <!-- 这儿就直接中文吧，方便维护 -->
          <div v-if="item.label === '全部'">
            <detail-all
              :tab-page-info="tabPageInfo"
              :table-data="tableData"
              @resetSubmit="resetSubmit"
            />
          </div>
          <div v-if="item.label === '进行中'">
            <detail-progress
              :tab-page-info="tabPageInfo"
              :table-data="tableData"
            />
          </div>
          <div v-if="item.label === '修改成功'">
            <detail-all
              :tab-page-info="tabPageInfo"
              :table-data="tableData"
              @resetSubmit="resetSubmit"
            />
          </div>
          <div v-if="item.label === '修改失败'">
            <detail-all
              :tab-page-info="tabPageInfo"
              :table-data="tableData"
              @resetSubmit="resetSubmit"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- 封装的其他组件 -->
    <div>
      <detail-edit
        :edit-page-info="editPageInfo"
      />
    </div>
  </div>
</template>

<script>
import { copyTool } from '../../../utils/tool'
import DetailEdit from './detail-edit.vue'
import DetailAll from './detail-all.vue'
import DetailProgress from './detail-progress.vue'

export default {
  components: { DetailEdit, DetailAll, DetailProgress },
  props: {
    detailInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      pageInfo: {
        isShow: false,
        dialogTitle: '记录详情',
        rowInfo: {},
        activeName: 'all',
        tabList: [
          {
            label: '全部',
            value: 'all'
          },
          {
            label: '进行中',
            value: 'progress'
          },
          {
            label: '修改成功',
            value: 'success'
          },
          {
            label: '修改失败',
            value: 'fail'
          }
        ]
      },
      form: {
        failReason: ''
      },
      rules: {},
      // tab内容组件数据
      tabPageInfo: {},
      // edit提交修改组件数据
      editPageInfo: {}
    }
  },
  watch: {
    detailInfo(val) {
      if (val) {
        this.pageInfo.isShow = true
        this.pageInfo.rowInfo = val
      }
    }
  },
  created() {
    const result = {
      'data': [
        {
          'detail_id': 1768523995700924416, // 铺货任务记录详情ID
          'push_update_goods_id': 1768523994975309824, // 铺货任务Id
          'push_platform': 3,
          'push_shop_code': '1391171890',
          'push_goods_code': '1001', // 商品ID(批量修改需要勾选传入该参数)
          'push_goods_title': null,
          'push_goods_pic_url': null,
          'goods_content_old': null,
          'goods_content_new': null,
          'goods_config': null,
          'reason': null,
          'status': 0, // 0进行中 1成功 2失败 3跳过
          'push_time': null,
          'created_at': '2024-03-15 14:25:53',
          'updated_at': null,
          'num': 0
        },
        {
          'detail_id': 1768523995700924416,
          'push_update_goods_id': 1768523994975309824,
          'push_platform': 3,
          'push_shop_code': '1391171890',
          'push_goods_code': '1002',
          'push_goods_title': null,
          'push_goods_pic_url': null,
          'goods_content_old': null,
          'goods_content_new': null,
          'goods_config': null,
          'reason': null,
          'status': 0,
          'push_time': null,
          'created_at': '2024-03-15 14:25:53',
          'updated_at': null,
          'num': 0
        }
      ],
      'page': 1,
      'size': 20,
      'total': 2
    }
    console.log('后端返回的数据 => ', result)
    this.tableData = [
      {
        'detail_id': 1768523995700924416, // 铺货任务记录详情ID
        'push_update_goods_id': 1768523994975309824, // 铺货任务Id
        'push_platform': 3,
        'push_shop_code': '1391171890',
        'push_goods_code': '1001', // 商品ID(批量修改需要勾选传入该参数)
        'push_goods_title': '内蒙古手撕风干牛肉干 散装特干香辣肉干厂',
        'push_goods_pic_url': 'https://picsum.photos/550/550/?1',
        'goods_content_old': '现货：48小时',
        'goods_content_new': '预售：4天',
        'status': 0, // 0进行中 1成功 2失败 3跳过
        'reason': '该商品已经被秒杀活动锁定, 不能新增SK'
      },
      {
        'detail_id': 444444444444444444, // 铺货任务记录详情ID
        'push_update_goods_id': 2222222222222222222222222, // 铺货任务Id
        'push_platform': 3,
        'push_shop_code': '20570221855899',
        'push_goods_code': '44444444444444444444444', // 商品ID(批量修改需要勾选传入该参数)
        'push_goods_title': '内蒙古手撕风干牛肉干 散装特干香辣肉干厂',
        'push_goods_pic_url': 'https://picsum.photos/550/550/?2',
        'goods_content_old': '现货：48小时',
        'goods_content_new': '预售：4天',
        'status': 1, // 0进行中 1成功 2失败 3跳过
        'reason': '该商品已经被秒杀活动锁定, 不能新增SK'
      }
    ]
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 调用查询接口
          console.log(this.form)
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleTabClick(tab) {
      this.tabPageInfo = {
        tabLabel: tab.label
      }
      this.pageInfo.tabList.forEach(item => {
        if (tab.label === item.label) {
          this.tabPageInfo.tabValue = item.value
        }
      })
    },
    submitAll() {
      this.editPageInfo = {
        isShow: true,
        dialogTitle: '修改内容'
      }
    },
    resetSubmit(rowInfo) {
      this.editPageInfo = {
        isShow: true,
        dialogTitle: '修改内容',
        rowInfo
      }
    },
    copy(val) {
      if (val) {
        copyTool(val)
        this.$message({ message: '复制成功', type: 'success' })
      } else {
        this.$message({ message: '无内容可复制', type: 'error' })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
p {
  margin: 0;
  line-height: 17px;
}
.detail-warpper {
  padding: 0 20px;
  ::v-deep {
    .el-dialog__header {
      padding: 17px 20px;
      border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .el-dialog__body {
      padding: 20px;
    }
  }
  .table-box {
    margin-top: 20px;
    max-width: 100%;
  }
}
</style>
